<template>
  <el-dialog title="选择员工" width="850px"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :visible.sync="currentVisible"
             :before-close="handleClose" >
    <div class="search">
      <el-form inline label-width="80px" @keyup.enter.native="searchByCondition">
        <el-form-item label="姓名">
          <el-input v-model="params.name" class="search-item">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchByCondition">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data" v-loading="loading">
      <el-table  :data="data.records" @row-dblclick="handleSelect">
        <el-table-column prop="name" label="姓名" width="150"> </el-table-column>
        <el-table-column prop="genderName" label="性别" width="100"> </el-table-column>
        <el-table-column prop="hospitalName" label="医院" width="150"> </el-table-column>
        <el-table-column prop="deptName" label="科室" min-width="150" width="auto"> </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="$config.defaultPageSizeOpts"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="data.total">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'EmployeeRef',
  components: { },
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      data: [],
      params: {},
      form: {},
      current: 1,
      size: 10,
      currentVisible: false,
      loading: false
    }
  },
  methods: {
    ...mapActions(['GetEmployeePage']),
    handleClose(done) {
      this.$emit('on-close')
      this.params = {}
      done()
    },
    close() {
      this.$emit('on-close')
      this.params = {}
      this.currentVisible = false
    },
    handleClick(data) {
      this.selectNode = data
    },
    search() {
      this.params.current = this.current
      this.params.size = this.size
      this.loading = true
      this.GetEmployeePage(this.params).then(res => {
        this.loading = false
        if (res) {
          this.data = res
        }
      }).catch(() => {
        this.loading = false
      })
    },
    searchByCondition() {
      this.current = 1
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.current = val
      this.search()
    },
    handleSelect(data) {
      this.$emit('on-select', data)
      this.currentVisible = false
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.currentVisible = val
      }
    }
  }
}
</script>
